<template>
  <div id="MainMenu"  class="container">

    <div id="navi" class="ver title">
      <div class="self">
        <ElImage :src="conf.server + currentUser.portrait" class="miniAvatar" fit="cover"></ElImage>

        <el-dropdown>
          <span class="el-dropdown-link">
            {{ currentUser.name }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="mine">个人中心</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <div id="main" class="line">
      <div id="leftNavi">
        <ElImage :src="conf.server + currentUser.portrait" class="avatar" fit="cover"></ElImage>
        <div id="linkButton">
          <div class="lbtn" @click="router.replace({ name: 'course' })">
            <el-link>
              <el-icon>
                <Memo />
              </el-icon>
              我的课程
            </el-link>
          </div>
          <div class="lbtn" @click="router.replace({
            name: 'mySource',
          })"><el-link><el-icon><Folder /></el-icon>我的资源</el-link></div>
          <div class="lbtn" @click="router.push({
            name: 'playground',
          })"><el-link><el-icon>
                <Iphone />
              </el-icon>PlayGround</el-link>
          </div>
          <div class="lbtn" @click="mine">
            <el-link>
              <el-icon><User /></el-icon>
              个人中心
            </el-link>
          </div>
        </div>
      </div>

      

      <div id="socket">
        <RouterView :key="$route.fullPath">
        </RouterView>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import router from '@/route';
import { provide, computed, onMounted } from 'vue';
import { useClientStore } from '../pinia/stores/client';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { conf } from '@/utils/conf'

const store = useClientStore()
const { currentCourseId, currentUser } = storeToRefs(store)

const route = useRoute();
const key = computed(() => {
  return route.path;
});

const mine = () => {
  router.push({
    name: 'mine'
  })
}
const logout = () => {
  localStorage.removeItem('token')
  router.push({
    path: '/main/login'
  })
}


onMounted(() => {
  currentCourseId.value = ''
})
</script>

<style lang="less" scoped>
* {
  // margin: 0;
  // padding: 0;
}

#MainMenu {
  position: absolute;

  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f2f4f7;

  #navi {
    width: 100%;
    height: 60px;
    background-color: #ffffff;
    border-radius: 5px;
    // .miniAvatar {
    //   width: 35px;
    //   height: 35px;
    //   border-radius: 25px;
    //   // background-size: contain;
    //   position: absolute;
    //   top: 4px;
    //   right: 100px;
    //   // background-image: url(../public/icon.png);
    //   background-color: aqua;
    // }

    .el-dropdown {
      // position: absolute;
      // background-color: rgba(253, 253, 253, 0);
      // height: 5vh;
      // right: 10px;
      // top: 2px;
      // text-align: center;
      // line-height: 5vh;
      // color: #a6a6a6;
    }

  }

  #main {
    position: relative;
    z-index: 0;
    // width: 100vw;
    // height: 700px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    top: 20px;
    background-color: #f2f4f7;
    padding-top: 0;
    height: calc(100% - 40px);


    #socket {
      // position: absolute;
      // width: 1112px;
      // height: 640px;
      // left: 305px;
      // top: 20px;
      position: relative;
      background-color: rgb(255, 255, 255);
      // margin: 10px;
      border-radius: 5px;
      box-shadow: var(--el-box-shadow-light);
      
    }

    #leftNavi {
      // position: absolute;
      // width: 155px;
      // height: 640px;
      // margin: 10px;
      background-color: rgb(255, 255, 255);
      border-radius: 5px;
      // top: 20px;
      // left: 115px;
      box-shadow: var(--el-box-shadow-light);

      #linkButton {
        // position: relative;
        // top: 150px;
        width: 100%;
        background-color: rgb(255, 255, 255);

        .lbtn {
          margin-top: 20px;
          /* width: 155px; */
          // width: 100%;
          // height: 50px;
          text-align: center;
          background-color: #fff;

          .el-link {
            width:100%;
            height: 50px;
            font-size: 16px;
            font-weight: 600;
          }
        }
      }



    }

    .avatar {
      width: 120px;
      height: 120px;
      background-color: rgba(242, 244, 247, 0.683);
      background-size: 100%;
      border-radius: 50%;
      box-shadow: var(--el-box-shadow);
      position: relative;
      margin: 30px auto;
      left: 0;
      right: 0;
      display: block;
    }

    .el-button {
      width: 140px;
      height: 60px;
    }


  }


}
</style>